<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    .box{
        margin:0 auto;
    	width:780px;
    	height:550px;
    	background-image: url(bg.png);
        box-sizing:border-box;
        padding:455px 270px 0px;
        box-sizing:border-box;
    }
    #btn{
        display: inline-block;
        width:260px;
        height:50px;
        background-color:pink;
        text-align: center;
        line-height:50px;
        color:#fff;
        font-size:25px;

    }

	</style>
    <script type="text/javascript">
    window.onload = function(){
        //获取节点
        var btn = document.getElementById("btn");
        // console.log(btn);
        //2.给节点加事件
        btn.onclick = function(){
        //生成随机数 乘以10并取整
        var num = Math.ceil(Math.random()*10);
        // if(num == 8){
        //   alert("恭喜你中了一等奖");
        // }else if(num == 2 || num == 6){
        //    alert("恭喜你中了二等奖");
        // }else if(num ==5){
        //    alert("恭喜你中了三等奖");
        // }else{
        //     alert("不要灰心再来一次");
        //       }
        //}//if判断的回括号
        //作业1：用switch改写多种判断
        switch(num){
          case 8:
          alert("恭喜你中了一等奖");
          break;
          case 2:
          case 6:
          alert("恭喜你中了二等奖");
          break;
          case 5:
          alert("恭喜你中了三等奖");
          break;
          default:
           alert("不要灰心再来一次");
        }
      }
    }//加载函数的回括号
    </script>
</head>
<body>
    <div class="box">
	<button id="btn">点击开始抽奖</button>
	</div>
</body>
</html>